import { Fragment } from '@/components/Fragment'; 
import { Text } from '@aws-amplify/ui-react';
import { TextDemo, TextStylingSample } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';
import {
  DefaultTextExample,
  GlobalStylingExample,
  LocalStylingExample,
  TextTruncatedExample,
  TextVariationExample,
  TextThemeExample,
} from './examples';

## Demo

<TextDemo />

## Usage

Import the Text primitive.

<Example>
  <DefaultTextExample />
  <ExampleCode>
  ```jsx file=./examples/DefaultText.tsx
  
  ```

  </ExampleCode>
</Example>

### Variations

Use the `variation` prop to change the Text variation. Available options are `primary`, `secondary`, `tertiary`, `error`, `warning`, `info`, and `success`.

<Example>
  <TextVariationExample />

  <ExampleCode>
  ```jsx file=./examples/TextVariation.tsx
  ```
  </ExampleCode>
</Example>

### Truncate

The `isTruncated` prop will render an ellipsis when the text exceeds the defined width.

<Example>
  <TextTruncatedExample />
  <ExampleCode>
      ```jsx file=./examples/TextTruncated.tsx

     ```

  </ExampleCode>
</Example>

## CSS Styling

<ThemeExample component="Text">
  <Example>
    <TextThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/TextThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Text" />

### Global styling

To override styling on all Text, you can set the Amplify CSS variables or use the built-in `.amplify-text` class.

(Revise this example)

<Example>
  <GlobalStylingExample />
  <ExampleCode>
```css
/* styles.css */
.amplify-text {
  --amplify-components-text-color-primary: var(--amplify-colors-red-80);
}
```

```jsx file=./examples/GlobalStyling.tsx

```

  </ExampleCode>
</Example>

### Local styling

To override styling on a specific Text, you can use a class selector or style props.

_Using a class selector:_

<Example>
  <Text className="styled-text">This is my styled text</Text>
  <ExampleCode>
    ```css
/* styles.css */
.styled-text {
  font-weight: var(--amplify-font-weights-bold);
  color: var(--amplify-colors-red-80);
  text-decoration: underline;
}
```

```jsx
import './styles.css';

<Text className="styled-text">This is my styled text</Text>;
```

  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <LocalStylingExample />
  <ExampleCode>
    ```jsx file=./examples/LocalStyling.tsx

    ```

  </ExampleCode>
</Example>